import { Modal, Button } from "antd";
import { FullscreenExitOutlined, FullscreenOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import screenfull from "screenfull";
import "./css/header.less"
import { deleteUserinfo } from "../../../redux/actions/login_action"
import dayjs from "dayjs";
import { reqWeather } from "../../../api";
import { getTitle } from "../../../config/tools";

@connect(
    state => ({
        userInfo: state.userInfo,
        title: state.title
    }),
    { deleteUserinfo: deleteUserinfo }
)
@withRouter
class Header extends Component {

    interval = null;

    state = {
        //是否全屏的状态
        isFull: false,
        date: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        weather: {},
        imgs: {},
        title: ""
    }

    /**
     * 切换全屏
     */
    screenChange = () => {
        screenfull.toggle();
    }

    logout = () => {
        Modal.confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '确认是否退出',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                this.props.deleteUserinfo();
            }
        })
    }

    getWeather = async () => {
        let weatherResult = await reqWeather();
        this.setState({ weather: weatherResult });
    }

    componentDidMount() {
        //批量加载本地资源，此处是批量加载图片
        let { imgs } = this.state;
        let requireContext = require.context("./img", true, /^\.\/.*\.png$/);
        // let imgs =requireContext.keys().map(requireContext);
        requireContext.keys().forEach((v) => {
            //将图片按照名字和被转换加载后的图片对象，保存到imgs对象中，以便后续用图片名称读取
            imgs[v] = requireContext(v).default;
        });

        this.setState({ imgs });

        //全屏与否的监听
        screenfull.on("change", () => {
            let isFull = !this.state.isFull;
            this.setState({ isFull });
        });

        let title = getTitle(this.props.location.pathname);
        this.setState({ title });

        this.interval = setInterval(() => {
            this.setState({ date: dayjs().format("YYYY-MM-DD HH:mm:ss") });
        }, 1000);

        this.getWeather();
    }


    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        let { isFull, date, weather } = this.state;
        let { username } = this.props.userInfo.user;

        return (
            <header className="header">
                <div className="header-top">
                    {
                        isFull ?
                            <Button size="small" onClick={this.screenChange}>
                                <FullscreenExitOutlined />
                            </Button>
                            :
                            <Button size="small" onClick={this.screenChange}>
                                <FullscreenOutlined />
                            </Button>
                    }
                    <span className="username">欢迎，{username}</span>
                    <Button className="logout" type="link" size="small" onClick={this.logout}>退出登录</Button>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">
                        {this.props.title || this.state.title}
                    </div>
                    <div className="header-bottom-right">
                        {date}
                        {
                            Object.keys(this.state.imgs).length !== 0 ?
                                <img src={this.state.imgs[`./${weather.wea_img}.png`]} alt="天气图标" />
                                : ""
                        }
                        {
                            Object.keys(weather).length !== 0 ? weather.wea : ""
                        }
                        &nbsp;&nbsp;
                        {
                            Object.keys(weather).length !== 0 ? weather.tem : ""
                        }
                    </div>
                </div>
            </header>
        );
    }
}
export default Header;